<template>
    <div class="list">
        <div v-for="(item, index) in list" :key="index">
            <!-- id 数据库的  content 内容   title标题-->
            <img :src="item.img" alt="" />
            <van-card :desc="item.content" :title="item.title" />
            <!-- 删除一条数据-->
            <template>
                <van-button size="mini" @click="shanchu(item.id)"
                    >删除数据</van-button
                >
                <!-- 修改一条数据-->
                <van-button
                    type="primary"
                    text="修改一条数据"
                    @click="putt(item.id)"
                />
            </template>
        </div>
        <!-- 添加一条数据-->
        <van-button type="primary" text="添加一条数据" @click="xiugai" />
        <van-overlay :show="show">
            <div class="wrapper" @click.stop>
                <div class="block">
                    <van-field placeholder="添加标题" v-model="title" />
                    <van-field placeholder="添加内容" v-model="content" />
                    <button @click="this.add">提交</button>
                </div>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import axios from "axios"; //引入axios
export default {
    data() {
        return {
            list: [], //列表渲染
            show: false, //关闭弹出框
            title: "", //标题
            content: "", //内容
            id: 0,
        };
    },
    created() {
        this.dataAll(); //调用
    },
    methods: {
        xiugai() {
            this.show = true; //点击开启弹框
            this.id = 0; //没有值走添加
        },
        //修改数据
        putt(id) {
            this.show = true; //点击开启弹框
            this.id = id; //传入修改的值
        },
        //删除一条数据
        shanchu(id) {
            axios.delete("/remove", {
                params: { id }, //传入id
            });
            setTimeout(() => {
                //自动更新页面
                this.dataAll();
            }, 100);
        },
        //添加一条数据
        add() {
            this.show = false; //点击时关闭弹出框
            /**
             *
             */
            console.log(this.id);
            //等于0走添加
            if (this.id == 0) {
                axios.post("/add", {
                    title: this.title,
                    content: this.content,
                });
            } else {
                //不等于0走修改
                axios.put("/change", {
                    id: this.id,
                    title: this.title,
                    content: this.content,
                });
            }
            setTimeout(() => {
                //自动更新页面
                this.dataAll();
            }, 200);
        },
        //列表渲染
        dataAll() {
            axios.get("/check").then((res) => {
                console.log(res.data);
                this.list = res.data.data;
            });
        },
    },
};
</script>

<style>
img {
    width: 50px;
    height: 50px;
}
.list > div {
    display: flex;
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 500px;
    height: 300px;
    background-color: #fff;
}
</style>
